<!--
 * @Author: your name
 * @Date: 2020-05-25 15:06:22
 * @LastEditTime: 2020-05-25 15:37:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bootstrap-practice\07其他内容\1页码.html
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href='https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
    <style>
        body{
            max-width: 500px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div>
        <div class="alert alert-danger">嗯~</div>
        <div class="alert alert-success">嗯~</div>
    </div>
    <div>
        <div class="breadcrumb">
            <li><a href="/">首页</a></li>
            <li><a href="/article">文章列表</a></li>
            <li class="active">yo,world <span class="badge">50k</span></li>
        </div>
        <h1>Yo,world</h1>
        <p>
            <div class="label label-success">面吧</div>
            <div class="label label-info">文字</div>
            <div class="label label-warning">感悟</div>
        </p>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
        </div>
        <div>
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
        </div>
        <div>
            esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        </div>
        <div>
            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <button class="btn btn-primary">赞 <span class="badge">50</span></button>
    </div>
    <ul class="pagination">
        <li><a href="#">上一页</a></li>
        <!-- active显示当前所在的页 -->
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">下一页</a></li>
    </ul>
    <!-- 默认居中显示 -->
    <ul class="pager">
        <li><a href="#">上一页</a></li>
        <!-- disabled是禁用的意思,当翻到最后一页就没有下一页了 -->
        <li class="disabled"><a href="#">下一页</a></li>
    </ul>
    <!-- 做侧栏的list-group -->
    <div class="list-group">
        <a href="#" class="list-group-item">Item</a>
        <a href="#" class="list-group-item">Item</a>
        <a href="#" class="list-group-item">Item</a>
        <a href="#" class="list-group-item">Item</a>
    </div>
</body>
</html>